import React from "react"
import "./style.less"
// import roommate2 from "../../../../static/images/home_img/roommate2.png"
import { getRoommateData } from "../../../../fetch/home"
import LoadMore from "../../LoadMore"

import { withRouter } from "react-router-dom"
import { connect } from "react-redux"

class RoommateList extends React.Component{

    constructor () {
        super();
        this.state = {
            data: [],
            hasMore: false,
            page: 1,
            isLoading: true  //判读数据是否处于请求状态，默认处于请求状态
        }
    }

    componentDidMount () {
        let cityName = this.props.city.cityName;
        this.httpRes(cityName,1);
    }

    httpRes(cityName,page){
        getRoommateData(cityName,page)
        .then(data => {
            console.log(data)
            this.setState({
                data: this.state.data.concat(data.data),
                hasMore: data.hasMore,
                isLoading: false,
                page: this.state.page+1
            })
        })
    }
    loadMoreFunc () {

        this.setState({
            isLoading: true,
        })
        let cityName = this.props.city.cityName;
        this.httpRes(cityName,this.state.page);
        console.log(this.state.isLoading);
        this.setState({
            
        })
    }   


    render (){
        let { data, hasMore, isLoading } = this.state;
        return (
            data.length>0?
            <div className="roommatelist-container">
            {
                data.map((ele,index) => {
                    return (
                        <div className="roommate-rent-info" key={index}>
                            <p className="houseresource-info">
                                <span>{ele.houseSource}</span>
                                {ele.title}
                            </p>
                            <img src={ele.img} alt="图片加载失败" />
                            <p className="roommate-author">
                                <img src={ele.headimg} alt="图片加载失败" />
                                {ele.author}
                                <i className={ele.sex==='男'?"iconfont icon-nan1 boy":"iconfont icon-nv girl"}></i>
                                <span className="roommate-time">{ele.time}</span>
                            </p>
                        </div>
                    )
                })
            }
            {
                hasMore
                ?<LoadMore loadMoreFunc={this.loadMoreFunc.bind(this)} isLoading={ isLoading }/>
                :<div>我是有底线的...</div>
            }   
            </div>
            :
            <div className="isLoading">正在加载数据...</div>
        )
    }
}

// --------redux-------------
function mapStateToProps(state){
  return {
    city: state.cityinfo
  }
}

export default withRouter(connect(
  mapStateToProps,
)(RoommateList))